<template>
 <view>
  <uni-icons class="back" type="left" size="25px" @click="goback()" :style="[{'position':'absolute'},{'z-index':'3'},{'margin-left':'15px'},{'position':'fixed'}]" color="#ffffff"></uni-icons>
  <view v-if="seen" class="show_view" style="width: 100%;">
   <image class="titleimg" lazy-load="true" mode='aspectFill' :src="httpurl+activity_detail.a_cover"></image>
   <view  class="titleimg" style=" position:absolute;z-index:3;top:0%; text-align:left;">
    <view style="margin-top: 38%; margin-left: 25px;">
     <uni-title type="h1" :title="activity_detail.a_name" align="left"  color="#ffffff"></uni-title>
     <view style="color:#ffffff ;font-size:15px ;">{{'类型 : '+activity_detail.type_name}}</view>
     <view style="color:#ffffff ;font-size:15px ;">{{'地点 : '+activity_detail.a_place}}</view>
    </view> 
   </view>
   <view class="titleimg" style="background-color: #000000; opacity:0.45; position:absolute;z-index:2;top:0%; text-align:center;">  
   </view>
  </view>
  <view v-if="seen" style="display: flex; flex-direction:column;width: 100%; justify-content: center;font-size: 14px;font-weight: 300;margin-top: 15px;">
   <view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;border-top: solid #e6e6e6 0.7px;">
    <view style="font-size: 17px;font-weight: 500;margin-top: 15px;">时间范围</view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;">
     <view>报名时间</view>
     <view>{{activity_detail.a_T_deadline,activity_detail.a_S_deadline}}</view>
    </view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
     <view>活动时间</view>
     <view>{{activity_detail.a_start_time,activity_detail.a_end_time}}</view>
    </view>
   </view>
   <view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
    <view style="font-size: 17px;font-weight: 500;margin-top: 15px;">积分设置</view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
     <view>活动积分</view>
     <view>{{activity_detail.a_score+'分'}}</view>
    </view>
   </view>
   <view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
    <view style="font-size: 17px;font-weight: 500;margin-top: 15px;">规则要求</view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;">
     <view>签到方式</view>
     <view>密码签到</view>
    </view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
     <view>限制人数</view>
     <view>{{activity_detail.a_max_number+'人'}}</view>
    </view>
   </view>
   <view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
    <view style="font-size: 17px;font-weight: 500;margin-top: 15px;">活动介绍</view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;">
     <view>活动标签</view>
     <view>{{activity_detail.type_name}}</view>
    </view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
     <view>活动简介</view>
     <view>{{activity_detail.a_describe}}</view>
    </view>
   </view>
   <view v-if="is_approve=='1'" style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
    <view style="font-size: 17px;font-weight: 500;margin-top: 15px;">审批意见</view>
    <view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;margin-bottom: 15px;">
     <view>审批结果</view>
     <view v-if="is_pass=='2'">未通过</view>
	 <view v-if="is_pass=='1'">通过</view>
    </view>
   </view>
   <view v-if="is_approve=='0'">
   	<input type="text" v-model="reason" placeholder="请输入您的理由">
	<button @click="approvalapply()">审批通过</button>
	<button @click="refuseapply()">审批不通过</button>
   </view>
   <view v-if="is_approve=='1'">
	   <uni-title align="center" title="已审批" type="h1"></uni-title>
   </view>
  </view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    httpurl: getApp().globalData.weburl, //app.vue中定义的全局变量，后端ip地址
    a_id:'',
    activity_detail:{},
    seen:false,
    isEnroll:'',
    state:'',
	reason:'',
	is_approve:'',
	is_pass:''
   }
  },
  onLoad: function (option) {
      this.a_id = option.a_id;
	  this.is_approve = option.type;
   console.log(this.a_id);
   this.getActivity_info();
  },
  computed:{
   gettimerange() {
       return (time1,time2) => {
     time1=time1.replaceAll('-','.');
     time2=time2.replaceAll('-','.');
     return time1.substr(0, 16)+" - "+time2.substr(0, 16);
       }
   }
  },
  onPullDownRefresh() {
   console.log('下拉刷新');
   this.getActivity_info();
   setTimeout(function () {
    uni.stopPullDownRefresh();
   }, 500);
  },
  methods: {
   goback(){
    console.log("返回")
    uni.navigateBack({
     delta: 1,
    });
   },
   getActivity_info(){
    var that=this;
    uni.request({
        url: that.httpurl+'mgetActivityDetail', //服务器地址+接口名
        data: {
      a_id:that.a_id,
        },
     method: 'POST',
        header: { 
      'X-Requested-With': 'XMLHttpRequest',
      "Accept": "application/json",
      "Content-Type": "application/json; charset=UTF-8"
     },
     dataType: 'json',
        success: (res) => {
      console.log("request success");
      console.log(res.data);
      that.activity_detail=res.data.activity;
      that.isEnroll=res.data.enroll;
      that.state=res.data.state;
	  that.is_pass=res.data.activity.is_pass;
      that.seen=true;
        },
     fail: (res) => {
      console.log("request fail");
        },
    });
   },
   goback(){
    console.log("返回")
    uni.navigateBack({
        delta: 1,//新注释
    });
   },
   approvalapply(){
   	   var that = this;
   	   uni.request({
   	       url: that.httpurl+'approvalActivity', //服务器地址+接口名
   	       data: {
   	     a_id:that.a_id ,
   		 reason:that.reason,
   	       },
   	    method: 'POST',
   	       header: { 
   	     'X-Requested-With': 'XMLHttpRequest',
   	     "Accept": "application/json",
   	     "Content-Type": "application/json; charset=UTF-8"
   	    },
   	    dataType: 'json',
   	       success: (res) => {
   	     console.log("request success");
   	     console.log(res.data);
   	     that.apply=res.data.apply;
   	     that.getfinish=true; 
   		 that.goback();
   	       },
   	    fail: (res) => {
   	     console.log("request fail");
   	       },
   	   });
   },
   refuseapply(){
   	    var that=this;
   	   uni.request({
   	       url: that.httpurl+'notapproveActivity', //服务器地址+接口名
   	       data: {
   	     a_id:that.a_id ,
   		  reason:that.reason,
   	       },
   	    method: 'POST',
   	       header: { 
   	     'X-Requested-With': 'XMLHttpRequest',
   	     "Accept": "application/json",
   	     "Content-Type": "application/json; charset=UTF-8"
   	    },
   	    dataType: 'json',
   	       success: (res) => {
   	     console.log("request success");
   	     console.log(res.data);
   	     that.apply=res.data.apply;
   	     that.getfinish=true; 
		 that.goback();
   	       },
   	    fail: (res) => {
   	     console.log("request fail");
   	       },
   	   });
   }
  }
 }
</script>

<style>
 .back {
        top: var(--status-bar-height);
    }
 .show_view{
  position:relative;
  z-index:1;
  margin:0 auto; 
 }
 .titleimg{
  width: 100%;
  height: 260px;
 }
 .bottom_btn{
  width: 90%;
  height: 50px;
  align-self: center;
  margin-top: 40px;
  border-radius: 5px;
  color: #ffffff;
  background-color: #528FFF;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 50px;
 }
</style>
